/** light theme */
$light-bg-primary = #f5f8fa;
$light-bg-high = #ffffff;
$light-bg-shadow = #dddfe1;
$light-bg-active1 = #dddfe1;
$light-bg-active2 = #ffffff;

$light-text-active = #f857a6;
$light-text-light = #ffffff;
$light-text-primary = #3e3e5f;
$light-text-low = #aeacb1;
$light-text-stress = #14281D;

$light-border-primary = #e1e4e8;
$light-border-secondary = #ebedef;


/** dark theme */
$dark-bg-primary = #1e2428;
$dark-bg-high = #303a40;
$dark-bg-shadow = #0c0e10;
$dark-bg-active1 = #1b2024;
$dark-bg-active2 = #20272b;

$dark-text-active = #ca5388;
$dark-text-light = #d7dfe6;
$dark-text-primary = #adbac7;
$dark-text-low = #444c56;
$dark-text-stress = #cdd9e5;

$dark-border-primary = #444c56;
$dark-border-secondary = #373e47;

:root.theme-light {
  --theme-bg-primary: $light-bg-primary;
  --theme-bg-high: $light-bg-high;
  --theme-bg-shadow: $light-bg-shadow;
  --theme-bg-actvie1: $light-bg-active1;
  --theme-bg-actvie2: $light-bg-active2;

  --theme-text-active: $light-text-active;
  --theme-text-light: $light-text-light;
  --theme-text-primary: $light-text-primary;
  --theme-text-low: $light-text-low;
  --theme-text-stress: $light-text-stress;

  --theme-border-primary: $light-border-primary;
  --theme-border-secondary: $light-border-secondary;
}

:root.theme-dark {
  --theme-bg-primary: $dark-bg-primary;
  --theme-bg-high: $dark-bg-high;
  --theme-bg-shadow: $dark-bg-shadow;
  --theme-bg-actvie1: $dark-bg-active1;
  --theme-bg-actvie2: $dark-bg-active2;

  --theme-text-active: $dark-text-active;
  --theme-text-light: $dark-text-light;
  --theme-text-primary: $dark-text-primary;
  --theme-text-low: $dark-text-low;
  --theme-text-stress: $dark-text-stress;
  
  --theme-border-primary: $dark-border-primary;
  --theme-border-secondary: $dark-border-secondary;
}

@media (prefers-color-scheme: light) {
  :root {
    --theme-bg-primary: $light-bg-primary;
    --theme-bg-high: $light-bg-high;
    --theme-bg-shadow: $light-bg-shadow;
    --theme-bg-actvie1: $light-bg-active1;
    --theme-bg-actvie2: $light-bg-active2;

    --theme-text-active: $light-text-active;
    --theme-text-light: $light-text-light;
    --theme-text-primary: $light-text-primary;
    --theme-text-low: $light-text-low;
    --theme-text-stress: $light-text-stress;

    --theme-border-primary: $light-border-primary;
    --theme-border-secondary: $light-border-secondary;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-bg-primary: $dark-bg-primary;
    --theme-bg-high: $dark-bg-high;
    --theme-bg-shadow: $dark-bg-shadow;
    --theme-bg-actvie1: $dark-bg-active1;
    --theme-bg-actvie2: $dark-bg-active2;

    --theme-text-active: $dark-text-active;
    --theme-text-light: $dark-text-light;
    --theme-text-primary: $dark-text-primary;
    --theme-text-low: $dark-text-low;
    --theme-text-stress: $dark-text-stress;
  
    --theme-border-primary: $dark-border-primary;
    --theme-border-secondary: $dark-border-secondary;
  }
}